<template>

	<scroll-view @scrolltolower="lowerBottom" scroll-y="true">
		<!-- 此处加列表内容 -->
		<view class="page" :style="{'padding-top':mt+'px'}">
			<c-nav-bar :title="title" ></c-nav-bar>
			<view class="card-title">
				<text>导游推荐</text>
				<text>带你轻松游嵊泗</text>
			</view>
			<view class="card-list" @scrolltolower="loadMoreData()">
				<view class="card-store" v-for="item,index in cardList" :key="index">
					<view class="card-left">
						<image :src="item.logoUrl" mode="aspectFill"></image>
					</view>
					<view class="card-right" style="padding: 0 20rpx;">
						<view class="right-title">
							<text>{{item.name}}</text>
							<text class="point">{{item.serveScore}}分</text>
						</view>
						<view class="right-tag">
							<text v-for="i,idx in item.tagsIdList" :key="idx" class="tag">{{i}}</text>
						</view>
						<view class="right-bottom">
							<text>
								服务次数
								<text class="number">{{item.serveNum}}</text>
								次</text>
							<text class="button" @click="goToBook(item)">立即预订 </text>
						</view>
					</view>
				</view>
			</view>
			<view class="more_text" v-if="showMoreData">到底了...</view>
			<!-- <view style="background: white;padding-bottom: 10vh;" v-if="showMoreData">
				<nodata></nodata>
			</view> -->
		</view>
	</scroll-view>

</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title:'导游推荐',
				pageNo: null,
				pageSize: null,
				showMoreData: false,
				totalPage: null,
				limit: 10,
				page: 1,
				cardList: [],
			}
		},
		components: {

			nodata
		},
		onLoad() {
			this.getGuideList()
		},
		methods: {
			lowerBottom() {
				if (this.page * this.pageSize >= this.total) return this.showMoreData = true
				this.page += 1
				this.getGuideList()
			},

			getGuideList() {
				this.$api.get('/api/guide/guidePage', {
					limit: this.limit,
					page: this.page
				}).then(({
					data: res
				}) => {

					if (res.msg == 'success') {
						this.totalPage = Math.ceil(res.data.total / this.limit)
						this.pageNo = res.data.pageNo
						this.pageSize = res.data.pageSize
						this.total = res.data.total
						if (this.page == 1) {
							this.cardList = res.data.list
						} else {
							this.cardList.push(...res.data.list)
						}

					}
				})
			},
			goToBook(item) {
				uni.navigateTo({
					url: 'detail?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	$box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

	.page {
		height: 1624rpx;
		background: #F5F8FA;
		padding: 20rpx;
		// padding-top: 150rpx;

		.more_text {
			color: #AAAAAA;
			text-align: center;
			padding: 41rpx 0;
			font-size: 30rpx;
		}

		.card-title {
			margin: 20rpx 0 30rpx 30rpx;

			text:nth-child(1) {

				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #111111;
				line-height: 36rpx;
			}

			text:nth-child(2) {
				padding-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
			}
		}
	}

	.card-list {
		width: 100%;

		.card-store {
			padding: 28rpx 20rpx 0;
			border-radius: 32rpx;
			display: flex;
			background-color: #fff;
			height: 219rpx;
			// border-radius: 10rpx;
			border-bottom: 1rpx solid #cccccc;
			margin-bottom: 14rpx;

			.card-left {
				width: 190rpx;
				height: 190rpx;
				// border-radius: 10rpx 0 0 10rpx;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.card-right {
				padding: 0 60rpx;
				flex: 1;

				.right-title {
					font-size: 30rpx;
					color: #111111;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.point {
						width: 70rpx;
						font-size: 28rpx;
						color: #FF4141;
						line-height: 28rpx;
					}
				}

				.right-tag {
					width: 100%;
					justify-content: flex-start;
					display: flex;
					flex-direction: row;
					margin: 10px 0;

					.tag {
						border-radius: 8rpx;
						color: #777777;
						font-size: 24rpx;
						border: 0.5rpx solid rgba(170, 170, 170, 0.5);
						padding: 4rpx 6rpx;
						margin-right: 8rpx;
					}
				}

				.right-bottom {
					color: #777777;
					font-size: 24rpx;
					margin-top: 44rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.number {
						color: #007A69;
						padding: 0 10rpx;
					}

					.button {
						text-align: center;
						width: 138rpx;
						height: 48rpx;
						background:#007A69;
						border-radius: 26rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 48rpx;
					}
				}



			}
		}
	}
</style>